<template>
  <div :style="{ padding: '0 0 32px 32px' }">
    <h4 :style="{ marginBottom: '20px' }">{{ dataSource.legend }}</h4>
    <v-chart :force-fit="true" :height="height" :data="data" :scale="scale" :onClick="handleClick">
      <v-tooltip/>
      <v-axis/>
      <v-legend />
      <v-line position="type*y" color="x"/>
      <v-point position="type*y" color="x" :size="4" :v-style="style" :shape="'circle'"/>
    </v-chart>
  </div>
</template>

<script>
  import { DataSet } from '@antv/data-set'
  import { ChartEventMixins } from './mixins/ChartMixins'

  export default {
    name: 'LineChartMultid',
    mixins: [ChartEventMixins],
    props: {
      title: {
        type: String,
        default: ''
      },
      dataSource2: {
        type: Object,
        default: () => {return {dataList:[
          { type: 'Jan', 作业1: 7.0, 作业2: 3.9,作业3: 5.9 },
          { type: 'Feb', 作业1: 6.9, 作业2: 4.2,作业3: 5.9 },
          { type: 'Mar', 作业1: 9.5, 作业2: 5.7,作业3: 5.9 },
          { type: 'Apr', 作业1: 14.5, 作业2: 8.5,作业3: 5.9 },
          { type: 'May', 作业1: 18.4, 作业2: 11.9,作业3: 5.9 },
          { type: 'Jun', 作业1: 21.5, 作业2: 15.2,作业3: 5.9 },
          { type: 'Jul', 作业1: 25.2, 作业2: 17.0,作业3: 5.9 },
          { type: 'Aug', 作业1: 26.5, 作业2: 16.6,作业3: 6.9 },
          { type: 'Sep', 作业1: 23.3, 作业2: 14.2,作业3: 5.9 },
          { type: 'Oct', 作业1: 18.3, 作业2: 10.3,作业3: 5.9 },
          { type: 'Nov', 作业1: 13.9, 作业2: 6.6 },
          { type: 'Dec', 作业1: 9.6, 作业2: 4.8 }
        ],fields:['作业1', '作业2','作业3']}}
      },

      dataSource: {
        type: Object,
        default: () => {return {itemList:[{legend:'作业A',itemList:[{axisX:1,axisY:20},{axisX:2,axisY:30}]},
            {legend:'作业B',itemList:[{axisX:1,axisY:25},{axisX:2,axisY:35}]},
            {legend:'作业C',itemList:[{axisX:1,axisY:35},{axisX:2,axisY:40}]},
          ],legend:'作业中核查通过趋势'}}
      },

      fields: {
        type: Array,
        default: () => ['作业1', '作业2','作业3']
      },
      // 别名，需要的格式：[{field:'name',alias:'姓名'}, {field:'sex',alias:'性别'}]
      aliases:{
        type: Array,
        default: () => [{field:'作业1',alias:'姓名'}]
      },
      height: {
        type: Number,
        default: 254
      }
    },
    data() {
      return {
        scale: [{
          type: 'cat',
          dataKey: 'x',
          min: 0,
          max: 1
        }],
        style: { stroke: '#fff', lineWidth: 1 }
      }
    },
    computed: {
      data() {
        // title = this.dataSource.legend;
        let itemList = this.dataSource.itemList || [];
        let dataList = [];
        let fields = [];
        itemList.forEach(function(item, index){
          let itemLegend = item.legend;
          fields.push(itemLegend);
          item.itemList.forEach(function(axisItem,axisIndex){
            let findItem = dataList.find(function(dataItem){
              return dataItem.type == axisItem.axisX;
            });
            if(!findItem){
              let axisObject = {type:axisItem.axisX};
              axisObject[itemLegend] = axisItem.axisY;
              dataList.push(axisObject);
            }else{
              findItem[itemLegend] = axisItem.axisY;
            }
          });

        });

        // const dv = new DataSet.View().source(this.dataSource.dataList)
        debugger;
        const dv = new DataSet.View().source(dataList)
        dv.transform({
          type: 'fold',
          // fields: this.dataSource.fields,
          fields: fields,
          key: 'x',
          value: 'y'
        })
        let rows =  dv.rows
        // 替换别名
        rows.forEach(row => {
          for (let item of this.aliases) {
            if (item.field === row.x) {
              row.x = item.alias
              break
            }
          }
        })
        return rows
      }
    }
  }
</script>

<style scoped>

</style>